<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				width: 100%;
				height: 100%;
				background-image: url(img/beijing.png);
			}
			
			#box {
				width: 700px;
				height: 560px;
				position: absolute;
				left: 580px;
				z-index: 1000;
				display: none;
			}
			
			.div1 {
				width: 700px;
				height: 560px;
				position: relative;
				z-index: 1000;
			}
			
			.div1 img {
				width: 100%;
			}
			
			.div1 img:nth-of-type(1) {
				width: 600px;
				height: 450px;
				position: absolute;
				top: 60px;
				left: -30px;
			}
			
			#btn4 {
				width: 200px;
				height: 60px;
				line-height: 60px;
				background-color: #C6C2A4;
				position: absolute;
				color: white;
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				font-family: "微软雅黑";
				top: 480px;
				left: 180px;
				cursor: pointer;
			}
			
			#btn4:hover {
				background-color: #589F92;
			}
			
			#show {
				width: 400px;
				height: 700px;
				float: left;
				margin-top: 20px;
				margin-left: 70px;
			}
			
			#show>img {
				width: 100%;
				margin-bottom: 10px;
			}
			
			#show>p {
				width: 80px;
				height: 30px;
				cursor: pointer;
				background-color: #CEC4B9;
				margin-left: 320px;
				color: black;
				font-family: "微软雅黑";
				text-align: center;
				line-height: 30px;
				z-index: 1000;
			}
			
			#show>p:hover {
				background-color: #FFFFFF;
			}
			
			#show .shan {
				position: absolute;
				left: 200px;
				bottom: 45px;
				width: 320px;
				height: 120px;
			}
			
			#show .shan img {
				width: 100%;
				height: 100%;
			}
			
			#xiangqing {
				width: 300px;
				height: 100px;
				font-size: 16px;
				font-family: "微软雅黑";
				position: relative;
				top: -35px;
			}
			
			#xiangqing img {
				width: 80px;
				height: 80px;
				background-size: cover;
			}
			
			#xiangqing p {
				font-size: 16px;
				font-family: "微软雅黑";
			}
			
			#show .banquan {
				position: absolute;
				left: 200px;
				bottom: 25px;
				font-family: "微软雅黑";
				text-align: center;
				font-size: 10px;
			}
			
			#main {
				width: 600px;
				height: 600px;
				border: 5px solid #ffffff;
				box-sizing: border-box;
				float: left;
				margin-top: 20px;
				margin-left: 80px;
			}
			
			#main div {
				box-sizing: border-box;
				float: left;
				width: 33.333%;
				height: 33.333%;
				border: 1px solid white;
				background-image: url(img/01.jpg);
				z-index: 1000;
			}
			
			#game,
			#game2,
			#game3 {
				width: 450px;
				height: 450px;
				background-image: url(img/guoguan.png);
				background-size: cover;
				position: absolute;
				font-family: "微软雅黑";
				left: 52%;
				top: 50px;
				text-align: center;
				margin-left: -157px;
				display: none;
				z-index: 1000;
			}
			
			#over {
				width: 600px;
				height: 600px;
				background-image: url(img/guoguan.png);
				background-size: cover;
				font-family: "微软雅黑";
				text-align: center;
				position: absolute;
				left: 550px;
				top: 20px;
				/*display: none;*/
				z-index: 1000;
			}
			
			#over>p {
				margin-top: 280px;
				margin-left: -90px;
				font-family: "微软雅黑";
				font-size: 18px;
				color: #ff0000;
			}
			
			#over>img {
				width: 150px;
				height: 150px;
				margin-right: 120px;
			}
			
			#game>p,
			#game2>p,
			#game3>p {
				margin-top: 250px;
				margin-left: -90px;
				font-size: 35px;
				color: white;
				font-weight: bold;
			}
			
			#btn,
			#btn2,
			#btn3 {
				width: 100px;
				height: 30px;
				border: 0px solid;
				font-family: "微软雅黑";
				margin-left: 130px;
				margin-top: 40px;
				line-height: 30px;
				font-weight: bold;
			}
			
			#btn:hover,
			#btn2:hover,
			#btn3:hover {
				cursor: pointer;
				background-color: #006400;
				color: black;
				background-color: white;
			}
			
			#time {
				position: relative;
				min-width: 300px;
				margin-top: 280px;
				right: 760px;
			}
			
			#right {
				width: 200px;
				height: 500px;
				position: relative;
				left: 140px;
				top: 50px;
				float: left;
			}
			
			#right img {
				width: 200px;
				height: 340px;
			}
			
			#time span {
				width: 37px;
				height: 37px;
				font-size: 20px;
				color: black;
				font-family: "微软雅黑";
				background-color: white;
				font-weight: bold;
				float: left;
				margin-left: 10px;
				text-align: center;
				line-height: 37px;
			}
			
			#time span:nth-of-type(1) {
				width: 120px;
			}
			
			.bottom {
				width: 500px;
				height: 180px;
				position: absolute;
				bottom: 3px;
				right: 100px;
				background-image: url(img/shan-1.png);
				background-position: 500px 180px;
				background-size: cover;
			}
			
		</style>

	</head>

	<body>
		<div id="box">
			<div class="div1">
				<img src="img/kaishi.png" />
				<div id="btn4">开 始 游 戏</div>

			</div>
		</div>
		<div id="show">
			<img src="img/01.jpg" />
			<p onclick="xiayizhang()">换一张</p>
			<div id="xiangqing">
				<p id="kushu1" style="position: absolute;top: -30px; font-family: '微软雅黑';">莫高窟第217窟 盛唐 无量寿佛</p><img style="position: absolute;top: 30px;left: 0px;" src="img/ma01.png" /><img style="position: absolute;top: 30px;left: 100px;" src="img/daolan.png" />
				<p style="font-size: 12px;position: absolute;top: 115px;">莫高窟第<span id="kushu2">217</span>窟</p>
				<p style="font-size: 12px;position: absolute;top: 115px; left: 110px;">莫高窟导览</p>
			</div>
			<div class="shan" id="shan"><img src="img/shan-22.png" /></div>
			<div class="banquan">敦煌研究院版权所有 陇ICP11000088号-1号</div>
		</div>
		<div id="game">
			<p>恭喜过关!</p>
			<div id="btn" onclick="nextgame()">
				下一张
			</div>
		</div>

		<div id="game2">
			<p>增加难度？</p>
			<div id="btn2" onclick="add()">
				确 定
			</div>
		</div>

		<div id="game3">
			<p>好可惜~~失败了</p>
			<div id="btn3" onclick="loop()">
				再来一次
			</div>
		</div>
		<div id="over">
			<p style="margin-right: 20px;font-size: 20px;">恭喜您全部通关！！！</p>

			<img src="img/jiangli.png" />
			<p style="margin-top: 20px;margin-right: 50px;">扫描上方二维码获取精美手机壁纸</p>
		</div>
		<div id="main">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div id="right">
			<img src="img/zi.png" />
			<div id="time">
				<span>剩余时间:</span><span>50</span><span>秒</span>
			</div>
		</div>
		<div class="bottom" id="bottom"></div>
		<script type="text/javascript">
			var rownum = 3;
			var cishu = 0;
			var index = 0;
			var now = "";
			var div = document.getElementById("main");
			var change = [];
			var imgarr = [];
			var movediv;
			var imgshow = document.getElementById("show").children[0];
			var xq = document.getElementById("xiangqing");
			var kushu1 = document.getElementById("kushu1");
			var kushu2 = document.getElementById("kushu2");
			var game = document.getElementById("game");
			var over = document.getElementById("over");
			var divs = document.getElementById("main").children;
			var time = document.getElementById("time");
			var shan1 = document.getElementById("bottom");
			var shan2 = document.getElementById("shan");
			var tt, mytime = 50;
			var showtime;
			level();
			window.onload = function() {
				if(document.body.clientWidth <= 1280) {
					shan1.style.display="none";
					shan2.style.display="none";
				}
			}

			//弹出层
			function level() {
				var Box = document.getElementById('box');
				var oH2 = document.getElementById('btn4');
				Box.style.display = 'block';
				oH2.onclick = function() { 
					Box.style.display = 'none';
					start();
				};
			}
			//设置时间
			function settime() {
				tt = mytime;
				showtime = setInterval(function() {
					if(tt == 0) {
						clearInterval(showtime);
						game3.style.display = "block";
						if(game.style.display == "block") {
							game3.style.display = "none";
						}
					} else {
						tt--;
						time.children[1].innerHTML = tt;
						if(tt <= 10) {
							time.children[1].style.color = "red";
						}
					}
				}, 1000);
				time.children[1].style.color = "black";
			}
			//换一张
			function xiayizhang() {
				console.log(1111111)
				clearInterval(showtime);
				mytime = mytime;
				rownum = rownum;
				creatdiv();
				start();
			}
			//下一局
			function nextgame() {
				clearInterval(showtime);
				mytime = mytime;
				creatdiv();
				start();
				game.style.display = "none";

			}
			//增加难度
			function add() {
				clearInterval(showtime);
				game2.style.display = "none";
				mytime += 40;
				rownum++;
				creatdiv();
				start();
			}
			//失败再来一次
			function loop() {
				clearInterval(showtime);
				game3.style.display = "none";
				mytime = mytime;
				rownum = rownum;

				if(now == "") {
					now = "img/01.jpg";
				} else {
					now = now;
				}

				imgshow.src = now;
				div.innerHTML = ""
				for(var i = 0; i < rownum * rownum; i++) {
					var dd = document.createElement("div");
					dd.style.backgroundImage = "url(" + now + ")";
					dd.style.width = 1 / rownum * 100 + "%";
					dd.style.height = 1 / rownum * 100 + "%";
					div.appendChild(dd);
				}
				start();
			}

			//动态创建div
			function creatdiv() {
				if(rownum == 3) {
					var a = Math.random();
					a = Math.ceil(a * 15);
					var n1;
					if(a < 10) {
						n1 = "0" + a;
					} else {
						n1 = a.toString();
					}
				} else if(rownum == 4) {
					var a = Math.random();
					a = Math.ceil(a * 15 + 2);
					var n1;
					if(a < 10) {
						n1 = "0" + a;
					} else {
						n1 = a.toString();
					}
				} else if(rownum == 5) {
					var a = Math.random();
					a = Math.ceil(a * 16 + 4);
					if(a < 10) {
						n1 = "0" + a;
					} else {
						n1 = a.toString();
					}
				}
				var src = "img/" + n1 + ".jpg"
				imgshow.src = src;
				now = src;
				//				console.log(now)
				var str = now;
				var jiequ = str.substr(4, 2);

				//				console.log(jiequ)
				if(jiequ == 2) {
					kushu1.innerHTML = "莫高窟第220窟 初唐 童子";
					kushu2.innerHTML = "220";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 3) {
					kushu1.innerHTML = "莫高窟第285窟 西魏 狩猎";
					kushu2.innerHTML = "285";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 4) {
					kushu1.innerHTML = "莫高窟第288窟 西魏 药叉";
					kushu2.innerHTML = "288";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 5) {
					kushu1.innerHTML = "莫高窟第407窟 隋 三兔莲花飞天井心";
					kushu2.innerHTML = "407";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 6) {
					kushu1.innerHTML = "莫高窟第57窟 初唐 千佛";
					kushu2.innerHTML = "57";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 7) {
					kushu1.innerHTML = "莫高窟第71窟 初唐 菩萨";
					kushu2.innerHTML = "71";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 8) {
					kushu1.innerHTML = "莫高窟第85窟 中唐 树下弹筝";
					kushu2.innerHTML = "85";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].style.display = "none";
					xq.children[3].style.display = "none";
					xq.children[2].style.left = "0px"
					xq.children[4].style.left = "10px"

					//无二维码
				}

				if(jiequ == 9) {
					kushu1.innerHTML = "榆林窟第3窟唐僧取经";
					kushu2.innerHTML = "3";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "none";
					xq.children[3].style.display = "none";
					xq.children[2].style.left = "0px"
					xq.children[4].style.left = "10px"
					//无二维码
				}
				if(jiequ == 10) {
					kushu1.innerHTML = "莫高窟第103窟 盛唐 化城喻品";
					kushu2.innerHTML = "103";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 11) {
					kushu1.innerHTML = "莫高窟第103窟 盛唐 维摩诘";
					kushu2.innerHTML = "103";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 12) {
					kushu1.innerHTML = "莫高窟第156窟 晚唐 婚嫁图";
					kushu2.innerHTML = "156";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 13) {
					kushu1.innerHTML = "莫高窟第249窟 西魏 阿修罗王";
					kushu2.innerHTML = "249";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 14) {
					kushu1.innerHTML = "莫高窟第249窟 西魏 飞天";
					kushu2.innerHTML = "249";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 15) {
					kushu1.innerHTML = "莫高窟第257窟 北魏 鹿王本生";
					kushu2.innerHTML = "257";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "block";
					xq.children[3].style.display = "block";
					xq.children[2].style.left = "100px"
					xq.children[4].style.left = "110px"

				}
				if(jiequ == 16) {
					kushu1.innerHTML = "莫高窟第35窟 五代 龙王";
					kushu2.innerHTML = "35";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "none";
					xq.children[3].style.display = "none";
					xq.children[2].style.left = "0px"
					xq.children[4].style.left = "10px"
					//无二维码
				}
				if(jiequ == 17) {
					kushu1.innerHTML = "莫高窟第57窟 初唐 胁侍菩萨";
					kushu2.innerHTML = "57";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "none";
					xq.children[3].style.display = "none";
					xq.children[2].style.left = "0px"
					xq.children[4].style.left = "10px"
					//无二维码
				}
				if(jiequ == 18) {
					kushu1.innerHTML = "莫高窟第3窟 元 千手千眼观音";
					kushu2.innerHTML = "3";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "none";
					xq.children[3].style.display = "none";
					xq.children[2].style.left = "0px"
					xq.children[4].style.left = "10px"
					//无二维码
				}
				if(jiequ == 19) {
					kushu1.innerHTML = "莫高窟第112窟 中唐 反弹琵琶";
					kushu2.innerHTML = "112";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "none";
					xq.children[3].style.display = "none";
					xq.children[2].style.left = "0px"
					xq.children[4].style.left = "10px"
					//无二维码
				}
				if(jiequ == 20) {
					kushu1.innerHTML = "莫高窟第217窟 盛唐 建筑";
					kushu2.innerHTML = "217";
					var src1 = "img/ma" + jiequ + ".png";
					xq.children[1].src = src1;
					xq.children[1].style.display = "none";
					xq.children[3].style.display = "none";
					xq.children[2].style.left = "0px"
					xq.children[4].style.left = "10px"
					//无二维码
				}

				div.innerHTML = ""
				for(var i = 0; i < rownum * rownum; i++) {
					var dd = document.createElement("div");
					dd.style.backgroundImage = "url(" + src + ")";
					dd.style.width = 1 / rownum * 100 + "%";
					dd.style.height = 1 / rownum * 100 + "%";
					div.appendChild(dd);
				}

			}
			//开始游戏
			function start() {
				index = 0;
				change = [];
				imgarr = [];
				divs = document.getElementById("main").children;
				for(var i = 0; i < rownum; i++) {
					imgarr[i] = [];
					for(var j = 0; j < rownum; j++) {
						var x = -600 / rownum * j + "px";
						var y = -600 / rownum * i + "px";
						imgarr[i][j] = { vx: parseInt(x), vy: parseInt(y) };
						change[index] = { vx: x, vy: y };
						index++;
					}
				}
				change.sort(function() {
					return Math.random() > 0.5 ? 1 : -1;
				});

				for(var i = 0; i < change.length; i++) {
					divs[i].draggable = "true";
					divs[i].style.backgroundPosition = change[i].vx + " " + change[i].vy;
					divs[i].ondragstart = function(e) {
						var e = e || window.event;
						movediv = e.target;
					}
					divs[i].ondragenter = function() { return false; }
					divs[i].ondragover = function() { return false; }
					divs[i].ondrop = function(e) {
						var e = e || window.event;
						e.stopPropagation();
						e.preventDefault();
						var t = e.target.style.backgroundPosition
						e.target.style.backgroundPosition = movediv.style.backgroundPosition;
						movediv.style.backgroundPosition = t;
						yanzheng();
					}
				}
				settime();
			}
			//过关验证
			function yanzheng() {
				var count = 0;
				var index = 0;
				var dd = document.getElementById("main").children;
				for(var m = 0; m < imgarr.length; m++) {
					for(var n = 0; n < imgarr[m].length; n++) {
						var x = parseInt(dd[index].style.backgroundPositionX);
						var y = parseInt(dd[index].style.backgroundPositionY);
						if(imgarr[m][n].vx == x && imgarr[m][n].vy == y) {
							count++;
						}
						index++;
						if(count == rownum * rownum) {
							game2.style.display = "none";
							game3.style.display = "none";
							game.style.display = "block";
							clearInterval(showtime);

							cishu += 1;
							if(cishu == 15) {
								game.style.display = "none";
								game2.style.display = "block";
								clearInterval(showtime);
							}
							if(cishu == 25) {
								game.style.display = "none";
								game2.style.display = "block";
								clearInterval(showtime);
							}
							if(cishu == 30) {
								game.style.display = "none";
								game2.style.display = "none";
								over.style.display = "block";
								clearInterval(showtime);
							}
						}

					}
				}
			}
		</script>
	</body>

</html>